<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <title>注册账号</title>
    <link rel="stylesheet" href="/css/main.css" type="text/css">
</head>
<body class="register">
<div class="main" style="padding-top: 2rem">
    <div class="container">
        <img src="/images/logo.png" alt="" class="logo-img">
        <p class="big-title">注册账号</p>
        <div class="con-form">
            <div class="con-li">
                <div class="li-text"><span>手机号</span></div>
                <input type="tel" placeholder="请输入手机号码" class="li-input" id="phoneNum" maxlength="11">
            </div>
            <div class="con-li">
                <div class="li-text"><span>验证码</span></div>
                <input type="tel" placeholder="请输入验证码" class="li-input" id="code" maxlength="6">
                <label class="get-code take-code">获取验证码</label>
                <label class="get-code got-code">已获取(<label id="time">60</label>s)</label>
            </div>
            <div class="con-li">
                <div class="li-text"><span>登录密码</span></div>
                <input type="password" placeholder="请设置6-16位登录密码" class="li-input" id="password" maxlength="16">
            </div>
            <div class="con-li">
                <div class="li-text"><span>确认密码</span></div>
                <input type="password" placeholder="请确认登录密码" class="li-input" id="confirmPass" maxlength="16">
            </div>
            <div class="con-li">
                <div class="li-text"><span>邀请码</span></div>
                <input type="tel" placeholder="" value="${tjphone}" class="li-input" id="partnerNum" maxlength="11" disabled>
            </div>
        </div>
        <div class="reg-btn" onclick="proving()">注册</div>
    </div>
</div>

<script src="/js/calc.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/layer/layer.js"></script>
<script>
	$(function(){
		//信息框
		  layer.open({
		    content: '请确认上级邀请码'
		    ,btn: '我知道了'
		  });
	}) ;

    // 60秒倒计时
    var setTime;
    $(function(){
        var time = parseInt($("#time").text());
        $(".take-code").on("click",function(){
            var phone = /^[1][3,4,5,6,7,8][0-9]{9}$/;
            var phoneNum = document.getElementById("phoneNum").value;
            if(!phone.test(phoneNum) || phoneNum.length != 11){
                layer.open({
                    content: '手机号码不正确'
                    ,skin: 'msg'
                    ,time: 1.5
                });
            }else{
				$.ajax({
					url:"/sendPhone",
					data:{"phone":phoneNum},
					dataType:"json",
					success:function(data){
						if(data.code == 200){
							layer.open({
				                content: '发送成功'
				                ,skin: 'msg'
				                ,time: 1.5
				            });
						}else{
							layer.open({
				                content: data.message
				                ,skin: 'msg'
				                ,time: 1.5
				            });
						}
					}
				}) ;
            	$(".got-code").show();
                $(".take-code").hide();
                setTime=setInterval(function(){
                    if(time<=0){
                        clearInterval(setTime);
                        $(".got-code").hide();
                        $(".take-code").show();
                        time = 60;
                        return;
                    }
                    time--;
                    $("#time").text(time);
                },1000);
            }
        })
    });
    //验证
    var phone = /^[1][3,4,5,6,7,8][0-9]{9}$/;
    function proving(){
        let phoneNum = document.getElementById("phoneNum").value,
            code = document.getElementById("code").value,
            password = document.getElementById("password").value,
            confirmPass = document.getElementById("confirmPass").value,
            partnerNum = document.getElementById("partnerNum").value;
        if(phoneNum.length === 0){
            layer.open({
                content: '请输入手机号码'
                ,skin: 'msg'
                ,time: 1.5
            });
        }else if(!phone.test(phoneNum) || phoneNum.length != 11){
            layer.open({
                content: '手机号码不正确'
                ,skin: 'msg'
                ,time: 1.5
            });
        }else if(code.length === 0){
            layer.open({
                content: '验证码不能为空'
                ,skin: 'msg'
                ,time: 1.5
            });
        }else if(password.length === 0){
            layer.open({
                content: '密码不能为空'
                ,skin: 'msg'
                ,time: 1.5
            });
        }else if(password.length <6 || password.length >16){
            layer.open({
                content: '请输入6-16位密码'
                ,skin: 'msg'
                ,time: 1.5
            });
        }else if(confirmPass != password){
            layer.open({
                content: '两次密码输入不正确'
                ,skin: 'msg'
                ,time: 1.5
            });
        }else{
        	$.ajax({
            	url:"/register",
    			data:{"validcode":code,"parentid":partnerNum,"phone":phoneNum,"password":password},
    			dataType:"json",
    			method:"post",
    			success:function(data){
    				if(data.code == 200){
    					layer.open({
        	                content: '注册成功'
        	                ,skin: 'msg'
        	                ,time: 2
        	            });
    					setInterval(function(){
							location.href = "/download" ;
    					},1000);
    				}else{
    					layer.open({
        	                content: data.message
        	                ,skin: 'msg'
        	                ,time: 2
        	            });
    				}
    			}
            }) ;
        }
        
    }
</script>
</body>
</html>